<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2022/12/26
  Time: 15:49
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Ajax基本用法</title>
    <script>
        function f1(){
            // 获取Ajax引擎,在目前主流浏览器中,均可以直接获取
            // 仅在IE8之前的IE版本无法直接获取
            // 目前IE已经被微软放弃,不再考虑
            let xhr = new XMLHttpRequest();
            console.log(xhr);
        }
        // let xhr;
        function f2(){
            // 1.获取Ajax引擎
            let xhr = new XMLHttpRequest();
            // 2.准备回调函数
            // 当发送Ajax请求,请求响应回来之后会自动调用的函数
            // 其属性值是一个函数类型
            // xhr.onreadystatechange = callback;
            xhr.onreadystatechange = function(){
                // 在Java开发中,主要存在三种状态
                // 1.Http请求状态,常用值:200、302、400、403、404、405、500
                // 2.Ajax请求状态,值有五种:0-4
                    // 0:对象已经建立,但是尚未初始化,还没有建立连接,因此,此时没有响应
                    // 1:请求已经建立,但是尚未发送请求,会给与响应,此时的响应无需处理
                    // 2:请求正在发送中,尚未处理完成,会给与响应,此时的响应无需处理
                    // 3:请求正在处理中,但是尚未返回完成之后的响应,会给与响应,此时的响应无需处理
                    // 4:请求已经处理完成,返回响应,即:整个Ajax业务完成,此时会给与响应,前端人员根据响应做处理
                // 3.业务逻辑状态码,由开发人员自定义,用于前后端交互,详情请等待下文
                console.log("ajax请求状态:"+xhr.readyState);
                console.log("Http请求状态:"+xhr.status);
                // 对于开发人员而言,只有Http请求状态为200以及Ajax状态为4的时候才需要基于响应做处理
                if(xhr.status == 200 && xhr.readyState == 4){
                    // 获取响应数据
                    // xhr.responseXML:返回响应的XML数据,该方式早期比较热门,目前基本不再使用
                    // xhr.responseText:返回响应的字符串数据,包含JSON格式字符串,目前主流
                    let result = xhr.responseText;
                    console.log(result);
                    document.getElementById("s1").innerHTML = result;
                }
            };

            // 3.建立与服务器的连接
            // 参数一:请求方式,常用请求方式:get、post、put、delete...
            // 参数二:访问的后台请求,包含请求参数
            // 参数三:是否异步
            xhr.open("get","${pageContext.request.contextPath}/sayHello",true)

            // 4.发送请求
            // 对于get请求,请求参数在url中传输
            // 对于post请求,在此处传输,需要做额外处理
            // 如果此处不需要传递参数,则参数值为null即可
            xhr.send(null);
        }

        function callback(){
            if(xhr.status == 200 && xhr.readyState == 4){
                // 获取响应数据
                // xhr.responseXML:返回响应的XML数据,该方式早期比较热门,目前基本不再使用
                // xhr.responseText:返回响应的字符串数据,包含JSON格式字符串,目前主流
                let result = xhr.responseText;
                console.log(result);
                document.getElementById("s1").innerHTML = result;
            }
        }
    </script>
</head>
<body>
<button onclick="f1()">获取ajax引擎</button><br>
<button onclick="f2()">ajax操作步骤</button>
<span id="s1"></span>
</body>
</html>
